import { Input } from 'antd';
import { useState, ChangeEvent } from 'react';
import { useDispatch } from 'umi';

const TodolistInput = () => {
  const [value, set_value] = useState<string>('');
  const dispatch = useDispatch();

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    // console.log(e.target.value);
    set_value(e.target.value);
  };

  const add = (): void => {
    // console.log(value);
    dispatch({ type: 'todolist/addlist', list: value });
    set_value('');
  };

  return (
    <>
      <Input
        placeholder="Basic usage"
        value={value}
        onChange={handleChange}
        onPressEnter={add}
      />
    </>
  );
};

export default TodolistInput;
